<template>
    <div class="music">
        <header class="header">
             <img class="music-logo" src="../assets/music-logo.png" >
            <input @keypress.enter="getSongsByKeywords()" type="text" v-model="keywords">
            <img class="seach-icon" src="../assets/seach.png" >
            <div @click="toUser()"><img class="avatar" src="../assets/avatar.jpg" alt=""><span>{{$route.query.username}}</span></div>
        </header>
        <main >
            <router-view></router-view>
        </main>
        <div class="play">
            <audio @pause="onPause()" @play="onPlay()" id="play-con" :src="playUrl" autoplay controls></audio>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            songsList:[],
            keywords:"arly",
            selectedIndex:-1,
            playUrl:'',
            playstate:false,
            username:this.$route.username
            
        }
    },
    methods: {
        toUser(){
            this.$router.push({
                path:'/user',
                query:{
                    username:this.$route.query.username,
                    title:"用户面板"
                }
            })
        },
        onPlay(){
            this.playstate = true
        },
        onPause(){
            this.playstate = false
        },
        playMv(url){
            let mvUrl = url
            this.$router.push({
                path:'/mvdetail',
                query:{
                    mvUrl:mvUrl,
                    username:this.$route.query.username,
                    title:"音乐播放器"
                }
            })
        },
        playMusic(url,index,id){
            console.log(index)
            this.selectedIndex = index
            this.playUrl = url
            this.$router.push({
                path:'/playdetail',
                query:{
                    id:id,
                    username:this.$route.query.username,
                    title:"音乐播放器"
                }
            })
        },
        getSongsByKeywords(){
            let url = 'http://127.0.0.1:3000/api/search?keyword='+this.keywords
            axios.get(url).then(res=>{
                console.log(res.data)
                this.songsList = res.data.data
                this.selectedIndex = -1 //初始化播放的选择
                this.$router.push({
                    path:'/home',
                    query:{
                        title:"音乐播放器",
                        username:this.$route.query.username
                    }
                })
            })
        }
    },
    mounted() {
        this.getSongsByKeywords()
    },
}
</script>
<style lang="less" scoped>
.play{
    box-shadow: 2px 2px 10px rgba(0, 0,0, .2);
    margin-left: 20%;
    width: 60%;
    position: absolute;
    background-color: #4D75F2;
    opacity: 0.8;
    height: 45px;
    audio{
        margin-left: 35%;
        width: 30%;
        background:none;
        border-radius: none;
        height: 35px;
        margin-top: 5px;
    }
}

input{
    z-index: 1;
    margin-top: 5px;
    border-radius: 20px;
    position: absolute;
    right: 50%;
    margin-right: -150px;
    width: 300px;
    outline: none;
    border: none;
    height: 30px;
    line-height: 30px;
    padding-left: 40px;
    
}
.header{
    border-radius: 10px 10px 0 0 ;
    position: relative;
    width: 60%;
    height: 40px;
    background-color: #4D75F2;
    opacity: 0.8;
    margin-left: 20%;
    div{
        cursor: pointer;
        height: 100%;
        float: right;
        margin-right: 50px;
        .avatar{
            border-radius: 16px;
            float: left;
            height: 32px;
            margin-top: 4px;
        }
        span{
            color: white;
            float:left;
            margin-left: 5px;
            line-height: 40px;
        }
    }
    .music-logo{
        height: 26px;
        margin-top: 7px;
        margin-left: 20px;
    }
    .seach-icon{
        z-index: 2;
        width: 20px;
        position: absolute;
        right: 50%;
        margin-right: 120px;
        margin-top: 10px;
    }
}
main{
    overflow: auto;
    position: relative;
    margin-left: 20%;
    width: 60%;
    height: 600px;
    background-color: rgba(225, 225, 225, .8);
}
.music{
    padding-top: 60px;
    position: relative;
    width: 100%;
    height: calc(100% - 60px);
}
</style>